<template>
  <div class="search-box">
      <div class="top">
          <header class="nav-top">
              <p class="goback">
                  <van-icon name="arrow-left" size="20px" @click="goBack" />
              </p>
              <p class="search">
                  <van-search v-model="val" placeholder="请输入搜索关键词" show-action shape="round">
                      <div class="search-btn" slot="action" @click="search">搜索</div>
                  </van-search>
              </p>
          </header>
          <van-dropdown-menu>
              <van-dropdown-item v-model="value" :options="option"/>
              <van-dropdown-item title="筛选" ref="item">
                  <van-cell>
                      <template #right-icon>
                          <van-field v-model="Dprice" placeholder="最低价格" />
                          <van-field v-model="Hprice" placeholder="最高价格" />
                      </template>
                  </van-cell>
                  <div style="padding: 5px 16px;">
                      <van-button type="danger" block round @click="onConfirm">
                          确认
                      </van-button>
                  </div>
              </van-dropdown-item>
          </van-dropdown-menu>
      </div>
      <main>
          <div class="goods-item"   v-for="(item, index) in sortdata"
        :key="index"  @click="detail(item.proid)">
              <van-card :price="item.originprice" :desc="item.proname" :thumb="item.img1" />
          </div>
      </main>
  </div>
</template>

<script>
import { hotWord,search } from "../api/search";
import { getProList } from "../api/home";
export default {
  name: "Search",
  data() {
    return {
      val: "",
      value: 0,
      option: [
        { text: "全部商品", value: 0 },
        { text: "价格升序", value: 1 },
        { text: "价格降序", value: 2 },
      ],
      Dprice: "",
      Hprice: "",
      goodsList: [],
      searList: [],
      hotWordList: [],
    };
  },
  methods: {
    detail(proid) {
      this.$router.push("/Detail/" + proid);
    },
    goBack() {
      this.$router.back(); //回退
    },
    //   goDetail(id) {
    //     this.$router.push({ path: "/GoodsDetail/"+id })
    //   },
    search() {
      this.searList.unshift(this.val);
      localStorage.setItem("searchList", JSON.stringify(this.searList));
      getProList({
        // url: "http://localhost:3000/list?keyword=" + this.val,
      })
        .then((res) => {
          console.log(res.data);
          this.goodsList = res.data.data;
        })
        .catch((err) => {
          console.log("err" + err);
        });
    },
    changeFn(val) {
      console.log(val);
    },
    onConfirm() {
      this.$refs.item.toggle();
      console.log("点击了按钮");
    },
  },
  created() {
    this.val = this.$route.params.keyword;
    this.searList = JSON.parse(localStorage.getItem("searchList"));
    hotWord().then((res) => {
      console.log(res.data);
      this.hotlist = res.data.data;
    });
    search({
        keyword:this.$route.params.keyword,
    })
      .then((res) => {
        console.log(this.$route.params);
        console.log(res.data);
        this.goodsList = res.data.data;
      })
      .catch((err) => {
        console.log("err" + err);
      });
  },
  computed: {
    sortdata: {
      get() {
        if (this.value == "0") {
          return this.goodsList;
        }
        if (this.value == "1") {
          let arr = [...this.goodsList];
          arr.sort((a, b) => a.originprice - b.originprice);
          return arr;
        }
        if (this.value == "2") {
          let arr = [...this.goodsList];
          arr.sort((a, b) => b.originprice - a.originprice);
          return arr;
        }
        return this.goodsList;
      },
    },
  },
};
</script>

<style scoped>
.search-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nav-top {
  height: 45px;
  display: flex;
  justify-content: space-between;
}

.goback {
  line-height: 54px;
  width: 15px;
}

.search {
  flex: 1;
}

.search-btn {
  /* border: 1px red solid; */
  background-color: red;
  color: white;
  height: 25px;
  line-height: 25px;
  padding: 0 2px;
  border-radius: 2px;
}

main {
  flex: 1;
  overflow: auto;
  background-color: #ededed;
}

.goods-item {
  margin: 10px 0;
}
</style>